<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>引用线上资源</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	
	<script src="https://unpkg.com/vue@next"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
	<script src="https://unpkg.com/element-plus"></script>
	
	<script src="https://unpkg.com/@element-plus/icons-vue"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.el-icon{
	margin-left: 10px;
	margin-right: 10px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<div>
		短标签用法：
		<el-icon :size="size" :color="color">
			<Edit />
		</el-icon>
		<br>
		属性引入用法：
		<el-switch v-model="value" :active-icon="Icons.Check" :inactive-icon="Icons.Close" /></el-switch>
		<!-- 或者独立使用它，不需要从父类派生属性 -->
		<!-- <Edit /> -->
	</div>
	
	<el-divider content-position="left">测试</el-divider><!-- =============================================================== -->
	<p class="desc">测试线上资源</p>
	1<el-icon><DocumentAdd /></el-icon>
	1<el-icon><document-add></document-add></el-icon>
	
	2<el-icon><ElementPlus /></el-icon>
	
	3<el-icon><element-plus></element-plus></el-icon>
	
	<el-divider content-position="left">结合 el-icon 使用</el-divider><!-- =============================================================== -->
	<p>随着额外的类正在加载，你的图标能够在2秒内360度旋转，你也可以覆盖这一点</p>
	
	<el-icon :size="20">
		<Edit />
	</el-icon>
	
	<el-icon color="#409EFC" class="no-inherit">
		<Share />
	</el-icon>
	
	<el-icon>
		<Delete />
	</el-icon>
	
	<el-icon class="is-loading">
		<Loading />
	</el-icon>
	
	<el-button type="primary">
		<el-icon style="vertical-align: middle">
			<Search />
		</el-icon>
		<span style="vertical-align: middle"> Search </span>
	</el-button>
	
	<el-divider content-position="left">直接使用 SVG 图标</el-divider><!-- =============================================================== -->
	<!-- 由于SVG图标默认不携带任何属性 -->
	<!-- 你需要直接提供它们 -->
	<div style="font-size: 20px">
		<Edit style="width: 1em; height: 1em; margin-right: 8px" />
	</div>
	<div style="font-size: 20px">
		<Share style="width: 1em; height: 1em; margin-right: 8px" />
	</div>
	<div style="font-size: 20px">
		<Delete style="width: 1em; height: 1em; margin-right: 8px" />
	</div>
	<div style="font-size: 20px">
		<Search style="width: 1em; height: 1em; margin-right: 8px" />
	</div>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			msg: 'Hello Vue!!',
			value: true,
		}
	},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
app.mount("#app");
</script>
</html>